<template>
	<view>
		<view class="wrap-bottom" :style="{paddingBottom: (distanceBottom > 30 ? distanceBottom : 30)}">
			<view class="bottom-bg">
				
				<view class="item" @click="onApply">
					<image class="img" src="@/static/live/lm_sq.png" ></image>
					
					<text class="txt">申请连麦</text>
				</view>
				
				<view class="item distance" @click="onInvite">
					<image class="img" src="@/static/live/lm_lb.png" ></image>
					
					<text class="txt">连麦列表</text>
				</view>
				
				
				
				<view class="zw"></view>
				
				<view class="item distance" @click="onEndLM" v-if="isLMIng">
					<image class="img" src="@/static/live/live_end_lm.png" ></image>
				</view>
				
				<view class="item distance" @click="onSwitchCamera">
					<image class="img" src="@/static/live/switchCamera.png" ></image>
					
					<text class="txt">翻转</text>
				</view>
				
				<view class="item distance" @click="onMore">
					<image class="img" src="@/static/live/more.png" ></image>
					
					<text class="txt">更多</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		endLM
	} from "@/api/newLive.js";
	import storage from "@/utils/storage";
	export default {
		data() {
			return {
				distanceBottom: uni.getSystemInfoSync()["safeAreaInsets"].bottom,
				isLMIng: false,
			}
		},
		mounted() {
			uni.$on("zbAgreeLMNoticeLMYH", (info) => {
				this.isLMIng = true
			})
			uni.$on("onAndroidBackPress", () => {
				if (this.isLMIng) {
					this.onEndLM()
				}
				this.onDestroyed()
			})
			uni.$on("onSocketEndLM", () => {
				this.isLMIng = false
			})
		},
		methods: {
			/**
			 * 销毁
			 */
			onDestroyed() {
				uni.$off("onAndroidBackPress")
				uni.$off("zbAgreeLMNoticeLMYH")
				uni.$off("onSocketEndLM")
			},
			/**
			 * 更换摄像头方向
			 */
			onSwitchCamera() {
				uni.$emit("ZBSwitchCamera")
			},
			/**
			 * 更多
			 */
			onMore() {
				uni.$emit("ZBShowMore")
			},
			/**
			 * 申请连麦
			 */
			onApply() {
				uni.$emit("ZBApplyLM")
			},
			/**
			 * 邀请的列表
			 */
			onInvite() {
				uni.$emit("ZBInviteLM")
			},
			/**
			 * 结束连麦
			 */
			async onEndLM() {
				let res = await endLM(storage.getLMItemID(), storage.getLiveRoomInfo().id)
				storage.clearLMItemID()
				this.isLMIng = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap-bottom {
		width: 750rpx;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.bottom-bg {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	.item {
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.img {
		width: 60rpx;
		height: 60rpx;
	}
	.txt {
		color: white;
		font-size: 20rpx;
	}
	.zw {
		flex: 1;
		overflow: hidden;
	}
	
	.distance {
		margin-left: 30rpx;
	}
</style>